<template>
  <el-dialog
    :title="formOptions.type ? formOptions.type: ''+ formOptions.title"
    :visible.sync="dialogVisible"
    :width="formOptions.dialogWidth"
  >
    <div>
      <el-form
        ref="form"
        v-loading="dialogPending"
        :disabled="onlyViewMode"
        :model="formModel"
        :rules="formRules"
        :status-icon="formOptions.showStatusIcon"
        :label-width="formOptions.labelWidth"
      >
        <el-form-item
          v-for="item in validFormItems"
          :key="item.key"
          :label="item.label"
          :prop="item.key"
        >
          <div v-if="item.slot">
            <slot
              :name="item.key"
              :row="item"
            ></slot>
          </div>
          <div v-else-if="item.formType === FormType.Input">
            <el-input
              v-model="item.value"
              :disabled="item.disabled || (formOptions.type === Type.Edit && item.disabledEdit)"
              :placeholder="item.placeholder"
              :style="item.customStyle ? item.customStyle : ''"
            >
            </el-input>
          </div>
          <div v-else-if="item.formType === FormType.Select">
            <el-select
              v-model="item.value"
              clearable
              :style="item.customStyle ? item.customStyle : ''"
              :placeholder="item.placeholder ? item.placeholder : ''"
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button
        @click="dialogVisible = false"
      >取消</el-button>
      <el-button
        v-if="!onlyViewMode"
        type="primary"
        :disabled="dialogPending"
        @click="handlerSave"
      >{{ primaryBtnText }}</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from 'vue-property-decorator'
import { FormType, Type, FormItem, FormOptions } from '@/models/form'
import { isEmpty, isNotEmpty } from '@/utils/validate'

@Component({})
export default class FormTemplate extends Vue {
  @Prop({ required: true }) formOptions!: FormOptions;
  @Prop({ required: true }) dialogPending!: boolean
  @Prop({ default: '保存' }) primaryBtnText?: string

  FormType = FormType;
  Type = Type;
  dialogVisible = false
  onlyViewMode = false

  get formRules() {
    const rolus:any = {}
    this.formOptions.formItems.filter((item: FormItem) => isNotEmpty(item.rules)).forEach((item: FormItem) => {
      rolus[item.key] = item.rules
    })
    return rolus
  }

  get formModel() {
    const form:any = {}
    this.formOptions.formItems.forEach((item: FormItem) => {
      form[item.key] = item.value
    })
    return form
  }

  get validFormItems() : FormItem[] {
    console.log(this.formOptions.formItems)
    // 只显示: 1.未配置权限的(即:无需权限), 2.已配置权限且拥有该权限, 3.处于预览模式且该字段类型为仅查看或非仅查看类型
    return this.formOptions.formItems.filter((item: FormItem) =>
      (isEmpty(item.permission) || (item.permission && this.$hasPermission(item.permission))) &&
    ((item.onlyView && this.formOptions.type === Type.View) || !item.onlyView))
  }

  handlerSave() {
    console.log(this.getFormData());
    (this.$refs.form as any).validate((valid: boolean) => {
      if (valid) {
        this.save(this.getFormData())
      }
    })
  }

  getFormData() {
    const map: any = {}
    this.formOptions.formItems.filter((item:FormItem) => isNotEmpty(item.value)).forEach((item: FormItem) => {
    // 日期范围类型的存在两个key
      if ((item.formType === FormType.DateRange || item.formType === FormType.DateTimeRange) && item.keys && item.value && item.value instanceof Array) {
        map[item.keys[0]] = item.formType === FormType.DateRange ? item.value[0] : item.value[0] + ' 00:00:00'
        map[item.keys[1]] = item.formType === FormType.DateRange ? item.value[1] : item.value[1] + ' 23:59:59'
      } else {
        map[item.key] = item.value
      }
    })
    console.log('getFormData', map)
    return map
  }

  @Emit()
  save(formData: any) {}

  open() {
    setTimeout(() => {
      this.dialogVisible = true
      this.onlyViewMode = this.formOptions.type === Type.View
      this.$refs.form && (this.$refs.form as any).resetFields()
      this.$refs.form && (this.$refs.form as any).clearValidate()
    }, 50)
  }

  close() {
    this.dialogVisible = false
  }
}
</script>

<style lang="scss" scoped>

</style>
